<!-- 供应商对账看板 -->

<script setup>

import {onMounted, ref} from "vue";
import Table from './Table.vue'
import CommonBox from "../../components/CommonBox.vue";
import screenApi from "../../router/screen.js";

const data1 = reactive({
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋111', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        // 使用\n进行换行处理，例如只对长度超过一定值的标签进行处理换行
        //return value.length > 8 ? `${value.slice(0, 8)}\n${value.slice(8)}` : value;
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  // 解决文字下方被切掉
  grid: {
    left: '18%',
    bottom: '38%'
  },
  series: [
    {
      data: [30, 30, 30, 40, 35],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const data2 = reactive({
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        // 使用\n进行换行处理，例如只对长度超过一定值的标签进行处理换行
        //return value.length > 8 ? `${value.slice(0, 8)}\n${value.slice(8)}` : value;
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  // 解决文字下方被切掉
  grid: {
    left: '18%',
    bottom: '38%'
  },
  series: [
    {
      data: [0, 3, 33, 40, 32],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const data3 = reactive({
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        // 使用\n进行换行处理，例如只对长度超过一定值的标签进行处理换行
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 0, 0, 0, 0],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const data4 = ref({
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        // 使用\n进行换行处理，例如只对长度超过一定值的标签进行处理换行
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 3, 33, 40, 32],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const data5 = ref({
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        // 使用\n进行换行处理，例如只对长度超过一定值的标签进行处理换行
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 1, 0, 3, 1],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const data6 = ref({
  tooltip: {
    trigger: 'item',
    showContent: true,
    formatter: function (params) {
      return params.data;
    }
  },
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        // 使用\n进行换行处理，例如只对长度超过一定值的标签进行处理换行
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [30, 27, -3, 0, 3],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

//定义map对象
function queryOrderNumMap(supplierId) {

  screenApi.queryOrderNumMap(supplierId).then(res=>{
    data1.series[0].data = res.queryOrderTotal;
    data1.xAxis.data = res.queryOrderName;
    data2.series[0].data = res.querySendTotal;
    data2.xAxis.data = res.querySendName;
    data3.series[0].data = res.queryBackTotal;
    data3.xAxis.data = res.queryBackName;

    data4.value.series[0].data = res.queryStoreTotal;
    data4.value.xAxis.data = res.queryStoreName;
    data5.value.series[0].data = res.queryBadTotal;
    data5.value.xAxis.data = res.queryBadName;
    data6.value.series[0].data = res.queryOrderSurplusTotal;
    data6.value.xAxis.data = res.queryOrderSurplusName;
  });
}

onMounted(async () => {
  //数据
  queryOrderNumMap('');
});

</script>

<template>
  <div class="head">
    <h1>订单数量对账</h1>
  </div>

  <div class="board-row">
      <common-box>
        <div class="chart-header">
          订购总数
        </div>
        <div style="height: 15em;width: 100%;">
          <v-chart :option="data1"></v-chart>
        </div>
      </common-box>
      <common-box>
        <div class="chart-header">
          发货总数
        </div>
        <div style="height: 15em;width: 100%;">
          <v-chart :option="data2"></v-chart>
        </div>
      </common-box>
      <common-box>
        <div class="chart-header">
          退货总数
        </div>
        <div style="height: 15em;width: 100%;">
          <v-chart :option="data3"></v-chart>
        </div>
      </common-box>
  </div>
  <div class="board-row">
    <common-box>
      <div class="chart-header">
        入库总数
      </div>
      <div style="height: 15em;width: 100%;">
        <v-chart :option="data4"></v-chart>
      </div>
    </common-box>
    <common-box>
      <div class="chart-header">
        不合格总数
      </div>
      <div style="height: 15em;width: 100%;">
        <v-chart :option="data5"></v-chart>
      </div>
    </common-box>
    <common-box>
      <div class="chart-header">
        订单剩余总数
      </div>
      <div style="height: 15em;width: 100%;">
        <v-chart :option="data6"></v-chart>
      </div>
    </common-box>
  </div>

  <Table></Table>

</template>

<style scoped>
.board-row {
  display: flex;
  gap: 1em;
  padding: 1em;
}

.board-row>div {
  flex: 1;
}

.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}

.vitas-data {
  border-radius: 50%;
  border: 3px solid #49bcf7;
  display: block;
  width: 10em;
  height: 10em;
  justify-content: center;
  align-items: center;
}

.vitas-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff;
}

.boxall {
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evenRow {
  background: #0C385E !important;
}
.oddRow{
  background:#062340 !important;
}


.selectOption{
  .el-input__wrapper{
    background-color: 	rgba(15,112,169,0.5) !important;
    border-radius: 50px;
    box-shadow: 0 0 0 0;
    padding: 0;
    border: 1px solid #0F70A9;
    width: 118px;
  }
  .el-input__inner {
    padding-left: 15px;
    line-height: 32px;
    font-size: 16px;
    color: #02D9FD;
  }
  .el-input__suffix{
    padding-right: 15px;
  }
  .el-select .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 0 !important;
  }
  .el-select .el-input.is-focus .el-input__wrapper{
    box-shadow: 0 0 0 0 !important;
  }
}
</style>